<template>
	<header class="sceond-tabs">
		<ul class="list">
			<li
				v-for="item in secondTabs"
				@click="changeTabs(item)"
				:class="{ 'active-tab': item.id === active }"
			>
				{{ item.name }}
			</li>
		</ul>
	</header>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
defineProps(['secondTabs'])
const active = ref('myTask')
const changeTabs = (tab: any) => {
	active.value = tab.id
}
onMounted(() => {
	
})
</script>
<style lang="less" scoped>
.sceond-tabs {
	padding: 8px 16px;
	.list {
		li {
			display: inline-block;
			margin-right: 5px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			color: #646a73;
			padding: 1px 10px;
			transition: all .3s ease-out;
		}
		.active-tab {
			background: @rok-mobile-background-color;
			border-radius: 20px;
			color: @rok-mobile-primary-color;
			padding: 1px 10px;
		}
	}
}
</style>
